<template>
	<!-- 鉴定列表页 -->
	<view>
		<view class="status" :style="{height:`${statusHeight}px`}"></view>
		<view :style="{height:`${statusHeight}px`}" style="background-color: #FFFFFF;"></view>
		<view class="bg"></view>
		<view class="navShell">
			<image @click="goBack" src="/static/image/backIcon.png"  class="backIcon"
				mode="widthFix"></image>
			<view class="navSearch" @click="goSearch">
				<!-- 左侧输入框 -->
				<view class="navInput">
					<image src="/static/image/search.png" class="searchIcon"></image>
					<input placeholder="搜索" style="width: 85%;" v-model="searchName" placeholder-class="placeCss" @confirm="getData" />
				</view>
			</view>
		</view>
		<!-- 搜索框占位符 -->
		<view style="height: 80rpx;background-color: #FFFFFF;"></view>
		<view class="titleShell">当前<text  class="redColor">{{num}}</text>等待鉴定订单</view>
		<view class="bottomShell">
			<view class="bottomListShell">
				<block v-for="(item,index) in list" :key="index">
					<view class="item">
						<view class="itemTopShell">
							<view class="userInfoShell">
								<image :src="item.headPortrait" class="headImg"></image>
								<view class="userInfo">
									<view class="userName">{{item.petName}}</view>
									<view class="time">{{item.create_time}}</view>
								</view>
							</view>
							<view class="authenText">等待鉴定</view>
						</view>
						<view class="content">提交了 {{item.name}} 鉴定请求已被提交，请您鉴定</view>
						<view class="imgShell">
							<block v-for="(i,idx) in item.goods" :key="idx">
								<image v-if="idx<3" :src="i.picture" class="goodsImg"></image>
							</block>
							<text class="num">+1</text>
						</view>
						<view class="button" @click="goDetail(item)">进行鉴定</view>
					</view>
				</block>
			</view>
		</view>
		<view class="susButton" @click="certificationList"> <text class="susText">获取</text> <text
				class="susText">鉴定单</text> </view>
	</view>

</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				statusHeight: 0, //状态栏
				num: 0,
				list: [],
				searchName: '',
				userData:{
					
				}
			}
		},
		onReady() {
			this.statusHeight = getApp().globalData.statusBarHeight
		},
		onShow() {
			this.list = []
			this.getData()
		},
		onLoad() {
			this.userData = uni.getStorageSync('userData').user
		},
		methods: {
			// 跳转鉴定详情
			goDetail(item) {
				uni.navigateTo({
					url: "/pages/highOrder/authenDetail/authenDetail?id=" + item.id
				})
				app.globalData.picture = item.picture //类型主图
			},
			goSearch() {
				// this.getData()
			},
			// 获取列表
			getData() {
				this.http({
					url: "/Main/certificationsList",
					data: {
						userId: this.userData.customerId,
						typeName: this.searchName
					},
					success: res => {
						if (res.code == 200) {
							this.list = res.data.data
							this.num = res.data.count
						}
					}
				})
			},
			// 点击返回
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 刷新列表(获取鉴定单)
			certificationList() {
				this.http({
					url: "/Main/certificationList",
					data: {
						userId: this.userData.customerId
					},
					success: res => {
						if (res.code == 200) {
							if (res.data.length == 0) {
								uni.showToast({
									title: "没有更多订单了",
									icon: "none",
									mask: true,
									duration: 1500
								})
							} else {
								this.list = res.data.data
								this.num = res.data.count
							}
						}
					}
				})
			}

		}
	}
</script>

<style scoped>
	.status {
		width: 100%;
		position: fixed;
		background-color: #FFFFFF;
		z-index: 99999;
	}

	.navShell {
		width: 100%;
		box-sizing: border-box;
		padding: 0 40rpx;
		height: auto;
		position: fixed;
		z-index: 9999;
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;
	}

	.navSearch {
		width: 65%;
		border: 1px solid #CA0000;
		border-radius: 76rpx;
		height: 76rpx;
		line-height: 76rpx;
		display: flex;
		justify-content: space-between;
		margin-left: 40rpx;
	}

	.backIcon {
		width: 20rpx;
		height: 32rpx;
	}

	.navInput {
		display: flex;
		align-items: center;
		padding: 0 28rpx;
	}

	.searchIcon {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}

	.placeCss {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.45);
		opacity: 1;
	}

	.titleShell {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		padding: 40rpx 0;
		background-color: #FFFFFF;
		box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.03);
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000000;
	}

	.redColor {
		color: #E32929;
		font-size: 40rpx;
	}

	.bg {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		background: linear-gradient(180deg, #F3F3F3 0%, #FFFFFF 100%);
	}

	.bottomShell {
		width: 100%;
		box-sizing: border-box;
		padding: 8rpx 40rpx;
		padding-bottom: 200rpx;
	}

	.bottomListShell {
		width: 100%;
	}

	.item {
		width: 100%;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		margin-top: 8rpx;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.itemTopShell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.userInfoShell {
		width: 70%;
		display: flex;
		align-items: center;
	}

	.headImg {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		display: block;
	}

	.userInfo {
		height: 60rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 14rpx;
	}

	.userName {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000000;
	}

	.time {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.65);
	}

	.authenText {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #E32929;
	}

	.content {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000000;
		padding: 30rpx 0;
	}

	.imgShell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}

	.goodsImg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
		display: block;
	}

	.num {
		padding: 5rpx 10rpx;
		text-align: center;
		border-radius: 20rpx;
		background-color: #707070;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
	}

	.itemGoods {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #E32929;
	}

	.button {
		width: 100%;
		text-align: center;
		padding: 20rpx 0;
		background-color: #E32929;
		border-radius: 4rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 60rpx;
		margin-bottom: 20rpx;
	}

	.susButton {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		background-color: #015BAA;
		position: fixed;
		right: 60rpx;
		bottom: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.susText {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>
